<template>
  <page-meta :page-style="`overflow:${configStore.showModel ? 'hidden' : 'visible'};`">
    <GlobalHeader title="123">123</GlobalHeader>
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
      <div class="content-c">
        <wd-button @click="configStore.showModel = true">开启popup</wd-button>
        <wd-button type="success" @click="onTestStorage">设置存储</wd-button>
        <wd-button type="info" @click="onGetTestStorage">获取存储</wd-button>
        <wd-button type="warning">警告按钮</wd-button>
        <wd-popup
          v-model="configStore.showModel"
          lock-scroll
          position="bottom"
          :safe-area-inset-bottom="true"
          custom-style="height: 40vh; padding:24rpx 18rpx"
          @close="closePopup"
        />
      </div>
    </mescroll-body>
    <button @tap="toPay">去支付</button>
  </page-meta>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useConfigStore, useSystemStore } from '@/store'
import { getStore, setStore } from '@/utils/storage'
import mescrollBody from '@/components/mescroll/mescroll-body/index.vue'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from '@/hooks/mescroll/useMescroll'
import { mallPayment } from '@/common/api/order'
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
const configStore = useConfigStore()
const systemStore = useSystemStore()

const mallOrderNo = ref('20241015142700001')
const toPay = () => {
  mallPayment({ mallOrderNo: mallOrderNo.value }).then(res => {
    const { prepayId, nonceStr, timeStamp, paySign } = res as any
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: String(timeStamp),
      nonceStr: nonceStr,
      package: 'prepay_id=' + prepayId,
      signType: 'SHA256withRSA',
      paySign: paySign,
      orderInfo: {
        appId: '',
        timeStamp: String(timeStamp),
        nonceStr: nonceStr,
        package: ''
      }
    })
  })
}

const goods = ref([])
/* 触底加载 */
/* 下拉刷新 */
const downOption = ref({
  isLock: !configStore.showModel
})
const upCallback = (mescroll: any) => {
  new Promise(resolve => {
    setTimeout(() => {
      resolve({ list: [] })
    }, 1000)
  })
    .then((res: any) => {
      // apiPost(mescroll.num, mescroll.size).then(res=>{
      const curPageData = res.list || [] // 当前页数据
      if (mescroll.num == 1) goods.value = [] // 第一页需手动制空列表
      goods.value = goods.value.concat(curPageData) //追加新数据
      mescroll.endSuccess(curPageData.length) // 请求成功, 结束加载
    })
    .catch(() => {
      mescroll.endErr() // 请求失败, 结束加载
    })
}
onMounted(() => {
  console.log('systemStore.getSystemSettings()', systemStore.getSystemSettings())
  console.log('systemStore.getSystemInfo()', systemStore.getSystemInfo())
})

const closePopup = () => {}
/* 测试设置存储 */
const onTestStorage = () => {
  setStore('test1', 'test1', new Date('2024/05/08 16:20:00').getTime())
  console.log('设置成功')
}
/* 测试获取存储 */
const onGetTestStorage = () => {
  console.log("getStore('test1')", getStore('test1'))
}

const text = ref('高度2000px(测试mask是否滚动)')
</script>

<style>
.wd-button {
  width: 100% !important;
}
</style>
